import { PdfJs } from "../../core";
import { FC, useEffect, useRef, useState } from "react";

interface PageThumbnailProps {
  canvas: HTMLCanvasElement;
  page: PdfJs.Page;
  pageHeight: number;
  pageWidth: number;
  rotation: number;
  onLoad(): void;
}

const PageThumbnail: FC<PageThumbnailProps> = ({
  canvas,
  page,
  pageHeight,
  pageWidth,
  rotation,
  onLoad,
}) => {
  const renderTask = useRef<PdfJs.PageRenderTask>();
  const [src, setSrc] = useState("");

  useEffect(() => {
    const task = renderTask.current;
    if (task) {
      task.cancel();
    }

    const printUnit = 150 / 72;
    canvas.height = Math.floor(pageHeight * printUnit);
    canvas.width = Math.floor(pageWidth * printUnit);

    const canvasContext = canvas.getContext("2d") as CanvasRenderingContext2D;
    canvasContext.save();
    canvasContext.fillStyle = "rgb(255, 255, 255)";
    canvasContext.fillRect(0, 0, canvas.width, canvas.height);
    canvasContext.restore();

    const viewport = page.getViewport({ rotation, scale: 1 });
    renderTask.current = page.render({
      canvasContext,
      intent: "print",
      transform: [printUnit, 0, 0, printUnit, 0, 0],
      viewport,
    });
    renderTask.current.promise.then(
      () => {
        "toBlob" in canvas
          ? canvas.toBlob((blob) => {
              setSrc(URL.createObjectURL(blob));
            })
          : setSrc((canvas as HTMLCanvasElement).toDataURL());
      },
      () => {
        /**/
      }
    );
  }, []);

  return (
    src && (
      <div className="rpv-print__page">
        <img src={src} onLoad={() => onLoad()} />
      </div>
    )
  );
};

export default PageThumbnail;
